<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书馆选座</title>
<link rel="stylesheet" href="/bzbs/manager/seat/css/bootstrap.css">

<script type="text/javascript" src="/bzbs/manager/lib/My97DatePicker/4.8/WdatePicker.js"></script> 


<script src="/bzbs/manager/layer/jquery-1.9.1.js"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
<script src="/bzbs/manager/layer/layer.js"></script>
<style type="text/css">
.main {
	min-width: 1065px;
	margin-top: 20px;
	border: 1px solid #666;
}

.side {
	border-left: 1px dashed #ccc;
}
/*位置图标说明*/
ul.seat-message {
	margin: 30px 0;
}

ul.seat-message li.message {
	list-style: none;
	height: 26px;
}

li.message span {
	line-height: 26px;
}
/*可选*/
li.choiceable-seat {
	background: url(/bzbs/manager/seat/img/choiceable.png) no-repeat 55px;
}
/*已售*/
li.sold-seat {
	background: url(/bzbs/manager/seat/img/sold.png) no-repeat 55px;
}
/*已选*/
li.choiced-seat {
	background: url(/bzbs/manager/seat/img/choiced.png) no-repeat 55px 0;
}

/*银幕*/
.screen {
	padding-top: 50px;
	font-size: 18px;
	background: url(/bzbs/manager/seat/img/screen.png) no-repeat 20px 0;
}
/*座位*/
.seat-row {
	margin-top: 5px;
}

.seat-row span {
	display: inline-block;
	width: 30px;
	height: 26px;
	margin: 0 3px;
	cursor: pointer;
	line-height: 26px;
}
/*未选*/
.seat-row span.seat-empty {
	background: url(/bzbs/manager/seat/img/choiceable.png);
}
/*已选*/
.seat-row span.seat-choiced {
	background: url(/bzbs/manager/seat/img/choiced.png) !important;
}
/*已售*/
.seat-row span.seat-sold {
	background: url(/bzbs/manager/seat/img/sold.png);
}
/*过道不显示位子*/
.none {
	opacity: 0;
}

/*右侧*/
.side {
	padding-top: 20px;
}

.side .media-body {
	padding-top: 8px;
}

.media-body h4 {
	font-weight: bold;
}

.side .movie-messige {
	padding-top: 15px;
	border-bottom: 1px dashed #ccc;
}
/*已选座位*/
.has-choice {
	padding-top: 15px;
}

.seat-text {
	line-height: 30px;
}

.ticket-container {
	display: inline-block;
	width: 82%;
	vertical-align: top;
}

.ticket-container span.ticket {
	display: inline-block;
	width: 60px;
	height: 30px;
	font-size: 12px;
	line-height: 30px;
	text-align: center;
	margin: 0 12px 10px 0;
	color: #f03d37;
	background: url(/bzbs/manager/seat/img/ticket-bg.png);
}
/*总票价*/
.ticket-price {
	border-bottom: 1px dashed #ccc;
}

.ticket-price span.price {
	font-size: 24px;
	color: #f03d37;
}
/*确认按钮*/
.confirm-btn {
	padding: 15px;
}

.confirm-btn .btn-sure {
	width: 80%;
	height: 42px;
	border-radius: 21px;
	margin-top: 15px;
	margin-bottom: 30px;
	outline: none;
	color: #ffffff;
	background: #f03d37;
}

#chaxun{
	width: 15%;
    height: 35px;
    border-radius: 21px;
    margin-top: 15px;
    margin-bottom: 30px;
    outline: none;
    color: #ffffff;
    background: #f03d37;
}

body{
	background: url("/bzbs/manager/seat/img/bj.jpg") repeat;
	background-size: 100%;
}
</style>
</head>
<body>
	<div class="container main">
		<form id="form1" >
		<input type="hidden" name="seatId" id="seatId"/>
		<input id="personId" type="hidden" name="personId" value="${sessionScope.user.id}" />
		
		<div class="row">
			<!-- 左侧 -->
			<div class="col-xs-8 hall">
				<!-- 位置图标说明 -->
				<div class="row seat-explain">
					<ul class="col-xs-12 seat-message text-center">
						<li class="col-xs-4 choiceable-seat message"><span>可选座位</span></li>
						<li class="col-xs-4 sold-seat message"><span>不可选座位</span></li>
						<li class="col-xs-4 choiced-seat message"><span>已选座位</span></li>
					</ul>
				</div>
				<!-- 位置区 -->
				<div class="row seats-container">
					<!-- 屏幕区 -->
					<div class="col-xs-10 col-xs-offset-1 screen-container">
						<div class="screen text-center">
							<div class="text-c"> 日期范围：
						<input type="text" name="startTime" onfocus="WdatePicker({ skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss' ,minDate:'%y-%M-%d %H:%m:%s',maxDate:'%y-%M-%d %H:{%m+30}:%s'  })" id="logmin" class="input-text Wdate" style="width:190px;">
								-
						<input type="text" name="endTime" onfocus="WdatePicker({ skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'logmin\')}' ,maxDate:'%y-%M-%d24:00:00' })" id="logmax" class="input-text Wdate" style="width:190px;">
					
<!-- 						<button type="button" id="chaxun" class="btn btn-sure">查询座位</button>
 -->					</div>
						
						</div>
					</div>
					<!-- 位子区 -->
					<div class="col-xs-12 seats-wrapper">


						<!-- 控制行 -->
						<c:forEach var="i" begin="1" end="${requestScope.room.rows}"
							step="1">
							<div class="row seat-row" data-row="${i}">
								<div class="col-xs-1 text-center">
									<span class="row-num">${i}</span>
								</div>
								<div class="col-xs-11">

									<!-- 控制列 -->
									<c:forEach var="j" begin="1" end="${requestScope.room.cols}"
										step="1">

											<c:if test="${requestScope.seatArray[i-1][j-1].status=='有座'}">
												<span class="seat-empty" data-col="${j}"  id="${requestScope.seatArray[i-1][j-1].seatId}"></span>
											</c:if>
											<c:if test="${requestScope.seatArray[i-1][j-1].status=='无座'}">
												<span class="seat-sold" data-col="${j}" id="${requestScope.seatArray[i-1][j-1].seatId}"></span>
											</c:if>
											<c:if test="${requestScope.seatArray[i-1][j-1].status=='损坏'}">
												<span class="none" data-col="${j}" id="${requestScope.seatArray[i-1][j-1].seatId}"></span>
											</c:if>

									</c:forEach>

								</div>
							</div>
						</c:forEach>




					</div>
				</div>
			</div>
			<!-- 右侧 -->
			<div class="col-xs-4 side">
				<div class="row movie-messige">
					<div class="col-xs-12">
						<p>
							自习室名称：<span>${requestScope.room.roomName}</span>
						</p>
						
						<p>
							行数：<span>${requestScope.room.rows}</span>
						</p>
						<p>
							列数：<span>${requestScope.room.cols}</span>
						</p>
						<p>
							自习室地址：<span>${requestScope.room.address}</span>
						</p>
					</div>
					
				</div>
				<!-- 选座 -->
				<div class="row choice-ticket">
					<div class="col-xs-12">
						<!-- 已选座位 -->
						<div class="has-choice">
							<span class="seat-text">座位：</span>
							<div class="ticket-container">
							</div>
						</div>
					</div>
				</div>

				<!-- 确认按钮 -->
				<div class="row confirm-btn">
					<div class="col-xs-12 text-center">
 						<input type="button"  id="buttonSubmit" class="btn btn-sure" value="确认预约">
 				
 					</div>
				</div>
			</div>
		</div>
		</form>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script>
		// 获得位置
		function getSeatText(seat) {
			// 第几排
			var row = $(seat).parents(".seat-row").attr("data-row");
			// 第几列
			var col = $(seat).attr("data-col");
			// 具体位子
			var seat = row + "排" + col + "座";
			return seat;
		}
		
		// 添加选座
		$(".seat-row").on(
				"click",
				".seat-empty",
				function() {

					// 已选个数
					var seatNum = $(".seat-choiced").length;
					if(seatNum<1){
						$(this).attr("class", "seat-choiced");
						// 得到具体位置
						var seat = getSeatText(this);
						
						//获取座位id
						var seatId=$(this).attr("id");
						$("#seatId").val("");
						$("#seatId").val(seatId);
						
						
						// 添加票
						$(".ticket-container").append(
								'<span class="ticket">' + seat + '</span>');
						// 总票数
						var ticketNum = $(".ticket").length;
						// 单价
						var unitPrice = $(".unit-price").text();
						// 总价
						$(".price").text(ticketNum * unitPrice);
					}else{
							layer.alert('你只能预约一个座位', {icon: 6});
						}
				})
		// 删除选座
		$(".seat-row").on("click", ".seat-choiced", function() {
			$(this).attr("class", "seat-empty");
			// 得到具体位置
			var seat = getSeatText(this);
			// 总票数
			var ticketNum = $(".ticket").length;
			// 移除票
			for (var i = 0; i < ticketNum; i++) {
				if ($($(".ticket")[i]).text() == seat) {
					$($(".ticket")[i]).remove();
				}
			}
		})
		
		
		$("#buttonSubmit").click(function(){
			var seatNum = $(".seat-choiced").length;
			var logmin=$("#logmin").val();
			var logmax=$("#logmax").val();
			if(seatNum==0){
				layer.alert('假如你要预约,请至少选择一个座位,不预约请返回', {icon: 6});
				return false;
			}else if(logmin==null || logmin==''|| logmax==null || logmax==''){
				layer.alert('请填写预约时间', {icon: 6});
				return false;
			}else{
				formSave();
			}
			
		})
	$.fn.serializeObject = function() {
      var o = {};
      var a = this.serializeArray();
      $.each(a, function() {
          if (o[this.name] !== undefined) {
              if (!o[this.name].push) {
                  o[this.name] = [o[this.name]];
              }
              o[this.name].push(this.value || '');
          } else {
              o[this.name] = this.value || '';
          }
      });
      return o;
    };
		
	 function formSave(){
			var order = $("form").serializeObject();
			var personId=$("#personId").val();
			var str = JSON.stringify(order); 
			$.ajax({
				url:"../order/add.do",
				type : "POST",
				contentType : 'application/json;charset=utf-8', //设置请求头信息
				dataType : "text",
				data : str ,  //将Json对象序列化成Json字符串，toJSON()需要引用jquery.json.min.js
				success : function(data) {
					if(data=="01"){
						layer.open({
							title:"提示信息",
							content:"预约成功,请在我的预约记录内查询预约信息",
						    btn:["确认"],
						    yes:function(){
						    	window.open("../order/myquery.do?personId="+personId,"content");
						    }

                        });
					}else if(data=="03"){
						layer.alert('你今天已预约且有效不能再次预约', {icon: 6});
					}else{
						layer.alert('预约失败,请联系管理员', {icon: 6});
					}
				},
				error : function() {
					layer.alert('系统错误，请联系管理员', {icon: 6});
				}
			});
		} 
	</script>
</body>
</html>